<script setup lang="ts">

</script>

<template>
  <div class="column-center">
    <div class="three-column-container">
      <!-- 左侧卡片 -->
      <div class="side-card">
        <div class="card-content">
          <h3 class="card-title" style="background-color: #42b983">功能分类</h3>

          <div class="category-cards">
            <!-- 学习区 -->
            <div class="category-card">
              <!--              <div class="card-icon">-->
              <!--                <i class="fa fa-graduation-cap"></i> &lt;!&ndash; 毕业帽图标 &ndash;&gt;-->
              <!--              </div>-->
              <router-link to="/study" class="nav-link2">学习区</router-link>
              <!--              <div class="card-name">学习区</div>-->
            </div>

            <!-- 素材商铺区 -->
            <div class="category-card card-material">
              <div class="card-icon">
                <i class="fa fa-shopping-bag"></i> <!-- 购物袋图标 -->
              </div>
              <router-link to="/tool_shops" class="nav-link2">工具商铺</router-link>
            </div>

            <!-- 需求广场 -->
            <div class="category-card card-demand">
              <div class="card-icon">
                <i class="fa fa-comments"></i> <!-- 对话图标 -->
              </div>
              <router-link to="/creative_conn" class="nav-link2">创意对接</router-link>
            </div>

            <!-- 预开项目 -->
            <div class="category-card card-project">
              <div class="card-icon">
                <i class="fa fa-lightbulb-o"></i> <!-- 灯泡图标 -->
              </div>
              <div class="card-name">预开项目</div>
            </div>

            <!-- 可继续添加更多分类 -->
          </div>
        </div>
      </div>

      <!-- 中间轮播图 -->
      <div class="carousel-container">
        <div class="carousel">
          <!-- 轮播图图片（实际项目中可替换为轮播组件） -->
          <!--          <img src="https://picsum.photos/1200/300" alt="轮播图示例">-->

          <div class="block text-center" m="t-4">
            <!--            <span class="demonstration">Switch when indicator is clicked</span>-->
            <el-carousel trigger="click" height="350px">
              <el-carousel-item v-for="item in 4" :key="item">
                <!--                <h3 class="small justify-center" text="2xl">{{ item }}</h3>-->
                <img src="https://picsum.photos/1200/300" alt="轮播图示例">
              </el-carousel-item>
            </el-carousel>
          </div>

        </div>
      </div>

      <!-- 右侧卡片 -->
      <div class="side-card">
        <div class="card-content">
          <h3 class="card-title">公告栏</h3>

          <p class="card-text">这是右侧卡片的内容，可放置热门活动、用户信息等。</p>
          <p class="card-text">样式与左侧卡片统一，保持页面风格一致。</p>
        </div>
      </div>
    </div>

    <div>
      <div style="background-color: #4a90e2;text-align: center">作品展示区</div>
      <div class="tbpc-row">

        <!-- 使用 v-for 循环生成 4 个 .nr1 元素 -->
        <div v-for="index in 7" :key="index" class="nr1">
            <div class="tb-pick-content-item">
              <a href="#" class="item-link">
                <div style="background-color: coral;height: 250px;position: relative">
                  <img src="https://img01.yzcdn.cn/upload_files/2024/08/27/FmRqSsFWHNndAhCEIT3GP2_tePKB.jpg!middle.jpg" style="position: absolute;width: 100%;height: 100%" alt="作品图片">
                </div>

                <div> 这个是 大标题</div>
                <div style="font-size: 15px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;"> 这个是
                  小标题 ，给发个瓦特问他为啥发多少个但是如果
                </div>

                <div style="font-size: 15px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;"> 这个是 类别
                </div>

                <div style="color: red;font-weight: bold">￥ 9.90 </div>

              </a>
          </div>
        </div>


      </div>
    </div>

    <div>
      <div style="background-color: #4a90e2;text-align: center">作品展示区</div>
      <div>
        作品内容
      </div>
    </div>

  </div>
</template>

<style scoped lang="less">
/* 父容器：控制三栏整体布局 */
.three-column-container {
  display: flex; /* 三栏横向排列 */
  gap: 20px; /* 三栏之间的间距 */
  width: 100%;
  //max-width: 1200px; /* 限制最大宽度，避免宽屏过散 */
  margin: 0 auto; /* 整体居中 */
  padding: 10px;
  box-sizing: border-box;
  justify-content: space-between;
}

/* 左侧和右侧卡片通用样式 */
.side-card {
  width: 20%; /* 占比 20% */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影增强层次感 */
  overflow: hidden; /* 避免内容溢出圆角 */
  flex-shrink: 0; /* 防止小屏时被压缩 */
}

/* 卡片内容样式（示例） */
.card-content {
  padding: 16px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

.card-text {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

/* 中间轮播图容器 */
.carousel-container {
  flex-grow: 1; /* 占满剩余空间，适配不同宽度 */
  width: 60%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative; /* 轮播图定位基准 */
  height: 350px; /* 固定轮播图高度，与卡片对齐 */
  max-width: 900px;
}

/* 轮播图示例样式 */
.carousel {
  width: 100%;
  height: 100%;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片铺满容器，保持比例 */
}

/* 响应式适配：小屏时堆叠显示 */
@media (max-width: 992px) {
  .three-column-container {
    flex-direction: column; /* 改为纵向排列 */
    gap: 16px;
  }

  .side-card, .carousel-container {
    width: 100%; /* 占满宽度 */
    height: auto; /* 高度自适应内容 */
  }

  .carousel-container {
    min-height: 200px; /* 保证轮播图最小高度 */
  }
}


// ============================ 轮播图样式
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

// ============================ 轮播图左边卡片样式

/* 卡片网格布局 */
.category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* 自动适应列数，最小宽度200px */
  gap: 20px; /* 卡片间距 */
}

/* 卡片样式 */
.category-card {
  //background-color: white;
  border-radius: 12px; /* 圆角更柔和 */
  padding: 5px 2px;
  text-align: center;
  height: 55px;
  background-color: #42b983;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 浅阴影增强层次感 */
  transition: all 0.3s ease; /* 动画过渡 */
  cursor: pointer;
  border: 1px solid transparent; /* 预留边框位置，避免hover时跳动 */

  text-decoration: none;
}

.nav-link2 {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  transition: color 0.3s;
  line-height: 55px;

}

/* 卡片悬停效果 */
.category-card:hover {
  transform: translateY(-5px); /* 轻微上浮 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 加深阴影 */
  border-color: #e0e0e0; /* 边框显形 */
}

/* 卡片图标 */
.card-icon {
  font-size: 36px;
  margin-bottom: 15px;
  color: #42b983; /* 主色调，可按分类调整 */
}

/* 不同分类的图标颜色（可选，区分分类） */
.card-material .card-icon {
  color: #2196f3;
}

/* 素材商铺区 */
.card-demand .card-icon {
  color: #ff9800;
}

/* 需求广场 */
.card-project .card-icon {
  color: #f44336;
}

/* 预开项目 */

/* 卡片文字 */
.card-name {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

/* 活跃状态（当前选中的分类） */
.category-card.active {
  background-color: #f0f9f5;
  border-color: #42b983;
}

/* 响应式调整：小屏幕时减少卡片内边距 */
@media (max-width: 768px) {
  .category-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* 手机端缩小最小宽度 */
    gap: 15px;
  }

  .category-card {
    padding: 15px 10px;
  }

  .card-icon {
    font-size: 28px;
  }

  .card-name {
    font-size: 16px;
  }
}


// ========================== 内容区样式

.tbpc-row {
  display: flex;
  box-sizing: border-box;
  flex-flow: row wrap;

  .nr1 {
    display: block;
    flex: 0 0 16.66666667%;
    max-width: 16.66666667%;
    background-color: palegreen;

    padding-left: 8px;
    padding-right: 8px;

    box-sizing: border-box;
    min-height: 1px;
    position: relative;

    .tb-pick-content-item {
      background-color: var(--tbpc-white-color, #fff);
      border-radius: 12px;
      box-sizing: border-box;
      cursor: pointer;
      float: left;
      height: auto;
      margin-bottom: 16px;
      position: relative;
      transition: all .5s;
      width: 100%;

      .item-link {

        display: inline-block;
        height: 100%;
        text-decoration: none;
        width: 100%;
      }
    }

  }
}
</style>